<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/head :: htmlhead">
    <script th:src="@{/static/layui/layui.js}"></script>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all">
    <script th:src="@{/static/echarts.js}"></script>
</head>
<body>

<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">区块验证时延分析</div>
                <div class="layui-card-body">
                    <div id="avgTimeShow" style="height: 600px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">区块验证时延</div>
                <div class="layui-card-body">
                    <div id="avgTimeText" style="height: 300px;">
                        <p>区块的验证时延也称作区块确认时间，是指一个区块在被共识见证节点生产后到加入区块链并最终确认的这段时间间隔。</p><br/>
                        <p>区块的验证时延是衡量共识算法的一个重要指标，能够直接影响区块交易的时延，较低的确认时延能给带来较高的区块链稳定性和较高的交易确认速率。</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">区块验证时延</div>
                <div class="layui-card-body">
                    <div id="avgTime" style="height: 300px;">
                        <p>𝑡𝑖𝑚𝑒𝐶𝑜𝑛𝑓𝑖𝑟𝑚 = 𝑐𝑜𝑛𝑠𝑒𝑛𝑠𝑢𝑠𝑇𝑖𝑚𝑒 + 𝑏𝑟𝑜𝑎𝑑𝑐𝑎𝑠𝑡𝑇𝑖𝑚𝑒</p><br/>
                        <p>𝑡𝑖𝑚𝑒𝐶𝑜𝑛𝑓𝑖𝑟𝑚——区块验证时延</p>
                        <p>𝑐𝑜𝑛𝑠𝑒𝑛𝑠𝑢𝑠𝑇𝑖𝑚𝑒——代表共识见证人节点执行共识所花费的时间</p>
                        <p>𝑏𝑟𝑜𝑎𝑑𝑐𝑎𝑠𝑡𝑇𝑖𝑚𝑒——代表共识验证完成后区块广播给各节点花费的时间。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript" type="text/javascript" charset="UTF-8">
    layui.config({
        base: '/static/lib/' //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(["echarts","ecStat"],
        function() {
            var $ = layui.jquery,
                element = layui.element,
                echarts = layui.echarts,
                alg = [[${session.alg}]]

                option1 = {
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        data: [alg, 'PBFT']
                    },
                    xAxis: {
                        name: '运行轮次',
                        type: 'category',
                        //data: [[${runRounds}]],
                        data: [10,20,30,40,50,60],
                        tooltip: {
                            valueFormatter: function (value) {
                                return '运行轮次：'+value;
                            }
                        },
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '确认时延',
                        min: 0,
                        max: 900,
                        interval: 100,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value.toFixed(4) + ' ms';
                            }
                        },
                        axisLabel: {
                            formatter: '{value} ms'
                        }
                    },
                    series: [{
                        name: alg,
                        data: [366.584893058936,369.61151416769474,367.5987353112809,367.37366856140716,367.4117759747746,367.6104455575046],
                        //  data: [[${DposptData}]],
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value.toFixed(4) + ' ms';
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#66cc99'
                            }
                        },
                        barMaxWidth: '50'
                    },
                        {
                            name: 'PBFT',
                            // data: [[${PbftData}]],
                            data: [714.743613767974,717.7702348767327,715.7574560203188,715.532389270445,715.5704966838125,715.7691662665425],
                            type: 'bar',
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value.toFixed(4) + ' ms';
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#FFFFcc'
                                }
                            },
                            barMaxWidth: '50'
                        }]
                };
            mychart1 = echarts.init(document.getElementById('avgTimeShow'));
            mychart1.setOption(option1, true)

        }
    );
</script>
</body>
</html>
